<template>
  <div style="height: 100%; width: 100%;">
    <el-container style="background-color: #F0F8F8; padding-left: 30px;width: 100%; height: 100%;">
      <el-scrollbar style="height:100%;margin-top: 30px;width: 100%;">
        <div>
          <div class="nameClass" v-html="termDetailData.name"></div>
          <div v-for="(propName, prop) in CONST.TERM_PROPERTY" v-if="UTIL.isNotEmpty(termDetailData[prop])">
            <div class="fieldName">{{ propName }}：</div>
            <div class="name-content" v-html="termDetailData[prop]"></div>
          </div>
          <div v-if="UTIL.isNotEmpty(termDetailData.termList) && termDetailData.termList.length > 0" class="fieldName">
            同义词
          </div>
          <div v-for="synonym in termDetailData.termList" style="margin-left: 50px;">
            <div class="fieldName">{{ termSynonymName[synonym.type] }}：</div>
            <div class="name-content" v-html="synonym.name"></div>
            <div v-for="(propName, prop) in CONST.TERM_PROPERTY" v-if="UTIL.isNotEmpty(synonym[prop])">
              <div class="fieldName">{{ propName }}：</div>
              <div class="name-content" v-html="synonym[prop]"></div>
            </div>
          </div>
          <hr style="margin-left: 0px; width: 60%;"/>
          <div v-if="termDetailData.explanation.length > 0">
            <div class="fieldName">释义：</div>
            <div v-for="item in termDetailData.explanation" style="margin-top: 15px;">
              <div v-html="item"></div>
              <div
                style="width: 65%;margin-top:5px;margin-bottom:20px;color: #959999;font-size: 10px; text-align: right;">
                <div>{{ termDetailData.nameSource }}</div>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </el-container>
  </div>
</template>
<script>

export default {
  name: "TermDetail",
  props: {
    originalConceptId: String
  },
  data() {
    return {
      mainHeight: 0,
      termDetailData: {
        termList: [],
        englishName: [],
        englishAbbr: [],
        frenchName: [],
        russianName: [],
        germanName: [],
        japaneseName: [],
        explanation: []
      },
      termSynonymName: {}
    }
  },
  methods: {
    getTermSynonymName() {
      this.$store.state.ruleList.filter(item => item.id === '18')[0].ruleItemList.forEach(item => {
        let key = item.idx;
        this.termSynonymName[key] = item.name;
      })
    }
  },
  created() {
    // 计算内容区域的高度
    this.mainHeight = CONST.WORKSPACE_HEIGHT - 140;
    this.axios.get('/pmph/action/term/selectDetailTermById', {
      params: {
        originalConceptId: this.originalConceptId
      }
    }).then((response) => {
      this.termDetailData = response.data;
    });
    this.getTermSynonymName();
  }
}
</script>

<style scoped>
.name-content {
  display: inline-block;
}

.nameClass {
  font-size: 16px;
  font-weight: bold;
}

.fieldName {
  display: inline-block;
  margin-top: 15px;
}

.vertical-align-top {
  vertical-align: top;
}
</style>
